<!DOCTYPE html> 
<html> 
	<head>
		<!-- required -->
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

		<script type="text/javascript">
			// configure framework using fluidOptions (a global variable) 
			var fluidOptions = {
				// reconfigure named plugins of the framework
				// provide an alternate implementation for required ones by giving the JS file name for a named plugin, 
				// leave it empty if inbuilt version of the plugin is to be used
				// in case inbuild plugin is not required - use "off" keyword (use with care, framework may stop working)
				namedPlugins: {
					// with the help of fluidOptions, any core plugin can be turned off 
					// or an external version can be configured
					
					// must be defined (if a custom application plugin is to be used)
					app: "%APP%/app.debug.js"
				}
			};
			
			// called when framework is completely loaded and navigaton to a page should happen now. 
			// Note, this is a fall-back method and is called only when framework's default navigation
			// engine is not in use and in that case either application plugin is not in use or does
			// not take care of this by having $f.app.onNavigationASync() function.
			// params:
			//	callback (function): function to call after navigation is done
			// returns (void):			
			function onNavigationASync(callback) {
				// This example requires core or above package to work
				if ($f.info.version.package.isKernel() || $f.info.version.package.isCore()) {
					$("#body").hide();
					$("body").append("<strong>This example cannot run with '" + $f.info.version.package.type + "' package.</strong>");
					return;
				};
				
				// once you are done with your logic of showing UI, you MUST CALL
				// given callback to complete frameowrk loading and firing post
				// navigation events
				// IMPORTANT: If this is not done, framework will not be loaded
				// completely and state of application will be unstable
				if (isFunction(callback)) {
					callback();
				};
			};
		</script>
		
		<!-- for DEMO UI use only -->
		<link href="../../res/bootstrap.min.css" rel="stylesheet">
		<link href="../../res/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="../../res/styles.css" rel="stylesheet">
		<!-- -->
		
	</head>
	<body> 
		<!-- required -->
		<applet name="fsa" code="fsa.class" archive="../../fsa.jar" style="position:absolute; left:-1px;" height="1" width="1"></applet> 

		<!-- ideally no user interface will be written in startup html directly
		however, just in case you want to write, put it in a div named "body", this will
		ensure that this UI is moved to a logical place in overall page structure so UI is 
		not distorted drastically -->
		<div id="body">
		
			<!-- top bar -->
			<div class="navbar">
			  <div class="navbar-inner">
				<div class="container-fluid">
				  <a class="brand">Events - Loose coupling instrument.</a>
				  <div class="pull-right">
					<a class="navbar-text noline" href="..\..\conceptual\events" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a>
					<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/events.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
				  </div>
				</div>
			  </div>
			</div>
			<!-- -->

			<div class="container-fluid">
				<div class="row-fluid">

					<!-- side bar -->
					<div class="span3"><div class="well sidebar-nav">
						<!-- sections -->
						<div class="accordion" id="accordion">
						  <!-- showcase -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
							<i class="icon-comment"></i> Showcase
						  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
							<p><i class="icon-cog"></i> This shows how plugins and features can define, raise (fire) and handle events.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- observations -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
							<i class="icon-eye-open"></i> Observations
						  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> See how events (name) and their namespace are defined in <span class="object">events</span> structure.</p>
							<p><i class="icon-cog"></i> See how event subscriptions are defined as array of - to handle multiple events via one handler only if required.</p>
							<p><i class="icon-cog"></i> Notice that event handler functions are defined seperately under <span class="object">events.handlers</span> structure.</p>
							<p><i class="icon-cog"></i> Take note that feature event and subscription definitions are merged with target plugins at runtime.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Activities -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
							<i class="icon-hand-right"></i> Activities
						  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Have a look at <span class="file">*.js</span> files.</p>
							<p><i class="icon-cog"></i> Usign developer tools, check-out events structure of <span class="object">$f.app</span> and 
							<span class="object">$f.myPlugin1</span> and <span class="object">$f.myPlugin2</span></p>
							<p><i class="icon-cog"></i> Click on provided buttons to see various expected behaviors.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Takeaways -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
							<i class="icon-shopping-cart"></i> Takeaways
						  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Any number of events can be defined under events structure.</p>
							<p><i class="icon-cog"></i> Events structure defined in a feature is merged in target plugins.</p>
							<p><i class="icon-cog"></i> All events defined in a plugin share same namespace.</p>
							<p><i class="icon-cog"></i> Events are defined as string, but are available as event functions at runtime.</p>
							<p><i class="icon-cog"></i> An early subscriber can cancel further propogation of event to other subscribers.</p>
							<p><i class="icon-cog"></i> Arguments can be passed while raising (firing) an event.</p>
							<p><i class="icon-cog"></i> In addition to subscribing to events at design time, events can also be subscribed and
							unsubscribed at runtime.</p>
						  </div></div></div>
						  <!-- -->
						</div>
						<!-- -->
					</div></div>
					<!-- -->
					
					<!-- right half where the action is -->
					<div class="span9"><div class="row-fluid">
							
						<a href="#" class="btn" onclick="javascript: $f.myPlugin1.events.event1.publish(100);">$f.myPlugin1.events.event1.publish(100);</a>	
						<a href="#" class="btn" onclick="javascript: $f.myPlugin1.events.event2.publish(200);">$f.myPlugin1.events.event2.publish(200);</a>	
						
						<p/><p/>

						<a href="#" class="btn" onclick="javascript: $f.myPlugin2.events.event1.publish(1000);">$f.myPlugin2.events.event1.publish(1000);</a>	
						<a href="#" class="btn" onclick="javascript: $f.myPlugin2.events.event2.publish(2000);">$f.myPlugin2.events.event2.publish(2000);</a>	

						<p/><p/>

						<a href="#" class="btn btn-info" onclick="javascript: $f.app.events.event1.publish(10);">$f.app.events.event1.publish(10);</a>	
						
						<p/><p/>
						
						<a href="#" class="btn btn-success" onclick="javascript: $f.app.events.event2.subscribe($f.myPlugin1, $f.myPlugin1.onAppEvent2);">$f.app.events.event2.subscribe(...);</a>	
						<a href="#" class="btn btn-inverse" onclick="javascript: $f.app.events.event2.publish(20);">$f.app.events.event2.publish(20);</a>	
						<a href="#" class="btn btn-warning" onclick="javascript: $f.app.events.event2.unsubscribe($f.myPlugin1.onAppEvent2);">$f.app.events.event2.unsubscribe(...);</a>	

						<p/><p/>
						
						<a href="#" class="btn btn-danger pull-right" onclick="javascript: $('#eventsLog').html('');">Clear Log</a>	
						
						<!-- tabs -->
						<ul class="nav nav-tabs">
							<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'eventsLog');">Events Log</a></li>
						</ul>
						<!-- -->
						
						<!-- events log -->
						<div id="eventsLog">
						</div>						
						<!-- -->
						
					</div></div>
					<!-- -->
					
				</div>	
			</div>
			
		</div>
		
		<!-- refer framework JS (as last item in body) -->
		<script type="text/javascript" src="../../fluid.debug.js"></script> 	
		
		<!-- for DEMO UI use only -->
		<script src="../../res/bootstrap.min.js"></script>
		<script src="../../res/general.js"></script>
		<!-- -->
		
		<!-- NOTE: Static definition of plugins and features is not required when File Include feature 
		           is available. These can be defined in $f.app instead. -->
	</body> 
</html> 